import React, { Component } from 'react';
import { SearchBar, Tabs } from 'antd-mobile'
import "../../styles/Gong.scss"
import * as service from "../../api/index"

class Gong extends Component {

    constructor(props) {
        super(props);
        this.state = {
            big_tu: [],
            one: [],
            youji: [],
            zhuanlan: [],
            wenda: []
        };
    }

    async componentDidMount() {

        //上面大图
        var res = await service.gong_top()
        console.log(res);
        this.setState({ big_tu: res.data })
        //下面盒子
        var res1 = await service.gong_xia()
        console.log(res1);
        this.setState({ one: res1.data.list })
        // //主页游记
        var res2 = await service.index_youji()
        console.log(res2);
        this.setState({ youji: res2.data[0] })

        //攻略专栏
        var res3 = await service.gong_zhuanlan()
        console.log(res3);
        this.setState({ zhuanlan: res3.data.list })

        //攻略问答
        var res4 = await service.gong_wenda()
        console.log(res4);
        this.setState({ wenda: res4.data.list })


    }
    render() {
        //解构完不用写this.state.list
        var { pic, title, jieshao } = this.state.big_tu;
        return (

            <div className='gong'>
                <div className='searc'>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} />
                </div>
                <div className="gonglue">
                    <Tabs>
                        <Tabs.Tab title='攻略' key='fruits'>
                            <div className="top">
                                <img src={pic} alt="" />
                                <h4>{title}</h4>
                                <p>{jieshao}</p>
                            </div>
                            <div className="xia">
                                {
                                    this.state.one.map((item, index) => {
                                        return (
                                            <div className="xia_box" key={index}>
                                                <div className="zuo">
                                                    <img src={item.pic} alt="" />
                                                </div>
                                                <div className="you">
                                                    <h4>{item.dizhi} | {item.title}</h4>
                                                    <p>{item.jieshao}</p>
                                                    <p>{item.name}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='游记' key='vegetables'>
                            <div className="youji">
                                {
                                    this.state.youji.pic?.map((item, index) => {
                                        return (
                                            <div className="youji_one" key={index}>
                                                <img src={item.img} alt="" />
                                                <p>{this.state.youji.jieshao}</p>
                                                <div className="mao">
                                                    <p>{this.state.youji.name}</p>
                                                    <p>{this.state.youji.dianzan}</p>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='专栏' key='animals'>
                            <div className="zhuanlan">
                                {
                                    this.state.zhuanlan.map((item, index) => {
                                        return (
                                            <div className="one" key={index}>
                                                <img src={item.pic} alt="" />
                                                <h2>{item.title}</h2>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </Tabs.Tab>
                        <Tabs.Tab title='问答' key='问答s'>
                            <div className="wenda">
                                {
                                    this.state.wenda.map((item, index) => {
                                        return (
                                            <div className="wenda_one" key={index}>
                                                <h3>{item.name}</h3>
                                                <div className="hhh">
                                                    <h4>{item.shuoming}</h4>
                                                    <span>{item.xingcheng}</span>
                                                    <div className="xia">
                                                        <p>{item.time}</p>
                                                        <p>{item.msg}</p>
                                                    </div>
                                                </div>

                                            </div>
                                        )
                                    })
                                }

                            </div>
                        </Tabs.Tab>
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default Gong;